<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>订单查询</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="https://static.91haoka.cn/vant.css" />
    <script src="https://static.91haoka.cn/vue.min.js"></script>
    <script src="https://static.91haoka.cn/vantall.js"></script>
    <script src="https://static.91haoka.cn/axios.min.js"></script>
    <script src="./js/copy.js"></script>
    <link rel="stylesheet" type="text/css" href="https://static.91haoka.cn/all.css" />
</head>
<style type="text/css">
    * {
        box-sizing: border-box;
        font-family: 'PingFang SC';
        font-size: 14px;
    }

    .images_container {
        display: flex;
        justify-content: center;
    }

    .order_images {
        height: 85px;
        width: 85px;
        margin-top: 54px;
    }

    .phone_over {
        font-size: 14px;
        color: #404247;
        margin-top: 30px;
        font-weight: 400;
    }

    .phone_input {
        background: #F6F8FB;
        height: 45px;
        border: 1px #E3E8F1 solid;
        border-radius: 10px;
        width: 100%;
        margin-top: 10px;
        padding-left: 9.5px;
    }

    input::placeholder {
        color: #D4D7DE;

    }

    .id_container {
        margin-top: 10px;

    }

    .id_input {
        height: 45px;
        line-height: 45px;
        text-align: center;
        width: 45px;
        border: 1px #E3E8F1 solid;
        background: #F6F8FB;
        border-radius: 10px;
    }

    .query_btn {
        background: #005AFF;
        color: white;
        font-size: 15px;
        width: 100%;
        height: 45px;
        border-radius: 10px;
        margin-top: 30px;
    }

    .password-input {
        display: flex;
        justify-content: space-between;
    }

    .copy_img {
        height: 15.48px;
        width: 13px;
        margin-left: 5px;
    }

    /* 超出两行失败原因显示... */
    .lose_reason {
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .lose_reason_expanded {
        -webkit-line-clamp: unset;
        max-height: none;
        white-space: normal;
        /* 允许文本换行 */
        word-wrap: break-word;
        /* 防止长单词溢出容器 */
    }

    .sq_btn {
        height: 30px;
        width: 86px;
        border-radius: 15px;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
        background: #F7F8F9;
        border: 0;
        margin-right: 5px;
    }

    .look_btn {
        height: 30px;
        width: 86px;
        border-radius: 15px;
        font-size: 14px;
        line-height: 30px;
        text-align: center;
        background: #005AFF;
        color: white;
        border: 0;
    }
</style>

<body>
    <div id="app" style="background: #F6F8FB; min-height: 100vh;overflow: hidden;" v-cloak>
        <div style="padding: 15px;display: flex;flex-direction: column;gap: 15px;" v-if="list.length>0">

            <div v-for="(item,index) in list" style="padding: 16px 15px;background-color: #FFFFFF;border-radius: 12px;">
                <div
                    style="display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #F6F8FB;padding-bottom: 10px;">
                    <span style="color: #020C1D;font-size: 14px;display: flex;">订单号：{{item?.order_id}}<img
                     @click="fuzhi(item?.order_id)" class="copy_img" src="./img/copyimg.png" alt="" /></span>
                    <span v-if="item.status==500" style="color:#FF9040;font-size: 14px;">{{item?.order_status}}</span>
                    <span v-if="item.status==550" style="color:#333333;font-size: 14px;">{{item?.order_status}}</span>
                    <span v-if="item.status==-460" style="color:#FF0000;font-size: 14px;">{{item?.order_status}}</span>

                </div>
                <div style="font-size: 17px;color: #020C1D;font-weight: 500;margin-top: 20px;">{{item.title}}</div>
                <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;"><span
                        style="color: #666666;font-size: 14px;">收件人</span>
                    <span style="color:#020C1D">{{item?.address_name}}</span>
                </div>
                <div v-if="item.show_plan_mobile==1"
                    style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;"><span
                        style="color: #666666;font-size: 14px;">生产号码</span> <span
                        style="font-size: #333333;">{{item?.plan_mobile_produced}}</span></div>
                <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;"
                    v-if="item.status_name&& item.show_status == 1"><span
                        style="color: #666666;font-size: 14px;">生产状态</span>
                    <span style="color:#020C1D">{{item?.status_name}}</span>
                </div>
                <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;"><span
                        style="color: #666666;font-size: 14px;"></span>
                    <span style="color:#020C1D;font-size: 14px;">付款：<span style="font-size: 17px;">￥{{item?.balance}}</span></span>
                </div>
                <div v-show="item.show_reason==1&&item.reason"
                    style="margin-top: 10px;border-bottom:1px solid #F6F8FB;padding-bottom: 10px;">
                    <div style="color:#666666">订单失败原因</div>
                    <div ref="failReason" style="margin-top: 10px;"
                        :class="item.arrow?'lose_reason':'lose_reason_expanded'">
                        {{item?.reason}}
                    </div>

                    <div style="text-align: right;color: #005AFF !important;">
                        <!-- <van-icon name="arrow-down" @click="item.arrow=!item.arrow" /> -->
                        <span style="margin-top: 2px;margin-left: 2px;color: #005AFF !important; " @click="item.arrow=!item.arrow" v-if="item.arrow">{{item.arrow?'展开详情':'收缩'}}</span>
                    </div>
                    <!-- <div style="text-align: right;" v-else>
                        <van-icon name="arrow-up" @click="item.arrow=!item.arrow" />
                        <span style="margin-top: 2px;margin-left: 2px;"></span>
                    </div> -->
                </div>
                <div style="margin-top: 10px;display: flex;align-items: center;justify-content: space-between;">
                    <div v-if="item.refund_status" style="width: 100%;">
                        <span style="color:#333333" v-if="item.refund_status==6">已退款</span>
                        <span style="color:#FF9040" v-if="item.refund_status==5">退款中</span>
                        <span style="color:#FF0000" v-if="item.refund_status==8">退款失败</span>

                    </div>
                    <div style="display: flex;justify-content: flex-end;width: 100%;">
                        <van-button class="sq_btn" style="font-size: 12px;" v-if="item.refund_button==1"
                            @click="tuikuan(item.id)">申请退款</van-button>
                        <van-button class="look_btn" v-if="item.status==550"
                            @click="openTracking(item)">查看物流</van-button>
                    </div>

                </div>
                <div style="margin-top: 10px;" v-if="item?.refund_reason">
                    退款原因:
                </div>
                <div v-if="item?.refund_reason" style="margin-top: 10px;" class="lose_reason">
                    {{item?.refund_reason}}</div>
            </div>

        </div>
        <div v-else style="display: flex;padding-top: 168px;flex-direction: column;align-items: center;">

            <img src="./img/nullimg.png" alt="" style="width: 265px;height: 207px;"></img>
            <span style="color: #98A5C9;font-size: 14px;margin-top: -40px;">未查询到订单</span>
        </div>
    </div>
    </div>


    <script>
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;


        new Vue({
            el: '#app',
            data: function () {
                return {
                    showKeyboard: false,
                    apis: '',
                    list: [
                        {}
                    ],
                    stateObj: {

                    },
                }
            },
            created() {

            },
            mounted() {

                if (location.href.includes('localhost') || location.href.includes('192.168.2.216')) {
                    this.apis = '/apis'
                }
                this.getList()



            },
            methods: {

                tuikuan: function (id) {
                    this.$dialog.confirm({
                        title: '是否确定要退款？',
                        message: '退款成功后,金额将原路返还',
                    })
                        .then(() => {
                            let mobile = this.getUrlParam('mobile')

                            axios.post(`${this.apis}/api/order/apply/refund`, { id: id, mobile: mobile })
                                .then(response => {
                                    if (response.data.msg.code == 0) {
                                        vant.Toast('已发起退款申请');

                                        this.getList()

                                    } else {
                                        vant.Toast(response.data.msg.info);
                                    }
                                })
                        })
                        .catch(() => {
                            // on cancel
                        });
                    return

                },
                fuzhi: function (text) {
                    const clipboardData = window.clipboardData;
                    if (clipboardData) {
                        clipboardData.clearData();
                        clipboardData.setData("Text", text);
                        return true;
                    } else if (document.execCommand) {
                        const el = document.createElement("textarea");
                        el.value = text;
                        el.setAttribute("readonly", "");
                        el.style.position = "absolute";
                        el.style.left = "-9999px";
                        document.body.appendChild(el);
                        el.select();
                        document.execCommand("copy");
                        document.body.removeChild(el);
                        vant.Toast('已复制');
                        return true;
                    }
                    return false;
                },
                getUrlParam: function (name) {
                    var query = window.location.search.substring(1);
                    var vars = query.split("&");
                    for (var i = 0; i < vars.length; i++) {
                        var pair = vars[i].split("=");
                        if (pair[0] == name) {
                            return pair[1];
                        }
                    }
                    return (false);
                },
                showDown(one) {
                    const range = document.createRange();
                    range.setStart(one, 0);
                    range.setEnd(one, one.childNodes.length);
                    let rangeHeight = range.getBoundingClientRect().height;
                    let textContainerHeight = one.getBoundingClientRect().height;
                    return [rangeHeight, textContainerHeight]
                },
                getList() {
                    let mobile = this.getUrlParam('mobile')
                    let idcard = this.getUrlParam('idcard') 
					let id = ''
					if(this.getUrlParam('id')){
						id = this.getUrlParam('id')
					}
					let tab = ''
					if(this.getUrlParam('tab')){
						tab = this.getUrlParam('tab')
					}
         
                    axios.get(`${this.apis}/api/get/order/list?mobile=${mobile}&idcard=${idcard}&id=${id}&tab=${tab}`)
                        .then(response => {
                            if (response.data.msg.code == 0) {
                                this.list = response.data.data
                                this.list = response.data.data.map(item => {
                                    return { ...item, arrow: true }
                                })
                                this.$nextTick(() => {
                                    const domRefs = this.$refs['failReason']
                                    for (let index = 0; index < domRefs.length; index++) {
                                        const dom = domRefs[index];
                                        const [rangeHeight, textContainerHeight] = this.showDown(dom)
                                        //显示箭头
                                        this.$set(this.list[index], 'arrow', rangeHeight > textContainerHeight)

                                    }
                                })

                            } else {
                                vant.Toast(response.data.msg.info);
                            }
                        })
                },
                openTracking(item) {
                    window.location.href = `tracking.html?order_id=${item.order_id}&id=${this.getUrlParam('id')}&trackingCompany=${encodeURIComponent(item.trackingCompany)}&tracking_number=${encodeURIComponent(item.tracking_number)}&tracking_button=${item.tracking_button}`

                },
            },
            watch: {

            },
        });


    </script>
</body>

</html>